<template>
  <div class="itemWrap" @click="fn()">
    <!-- 替换图片: 使用具名槽口slot -->
    <span v-show="bol"><slot name="activeImg"></slot><br /></span>
    <span v-show="!bol"><slot name="normalImg"></slot><br /></span>
    <!-- 替换文字：使用props -->
    <span :class="{active: bol}">{{ txt }}</span>
  </div>
</template>

<script>
export default{
  // 希望从外部接收的值: txt标签名称; mark当前标签(索引/标识); sel父组件中当前选中的标签
  props: ['txt', 'mark', 'sel'],
  // computed也是定义组件数据的，与data:{}不同的是，这里定义的数据是需要通过逻辑计算得到的。
  computed: {
    bol: function(){
      if(this.mark == this.sel){
        return true;
      }
      return false;
    }
  },
  methods: {
    fn: function(){
      // 这里涉及数据的逆向传递, 不能写成: this.sel = this.mark
      this.$emit('change', this.mark);
      this.$router.push('/' + this.mark);
    }
  }
}
</script>

<style>
  .itemWrap{width: 20%; float: left; text-align: center; font-size: 0;}
    .itemWrap img{width: 40px;}
    .itemWrap span{font-size: 12px; color: #666;}
    .itemWrap .active{color: #42bd56;}
</style>
